<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%= web_title%></title>
    <link rel="stylesheet" href="/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/layuiadmin/style/admin.css" media="all">
    <link rel="stylesheet" href="/ruoling/css/ruoling-ui.css">
    <link rel="stylesheet" href="/ruoling/css/ruoling-load.css">
</head>
<body>
    <div class="layui-fluid" >
       <div class="Yiling-white Yiling-top">
           <form class="layui-form">
            <ul>
                <li class="Yiling-paddingLi" >
                <span>登录账号:</span> <input type="text" name="sys_user_login_name" placeholder="请输入登录账号" autocomplete="off" class="layui-input Yiling-width200">
                </li>
                <li class="Yiling-paddingLi">
                    <button type="button" lay-submit lay-filter="FormSearch" class="layui-btn layui-btn-sm layui-btn-radius"><i class=" layui-icon layui-icon-search" style="font-size:14px"></i>搜索</button>
                    <button type="button" id="CloseSubmit" class="layui-btn layui-btn-sm layui-btn-radius  layui-btn-warm"><i class=" layui-icon layui-icon-refresh-3" style="font-size:14px"></i>重置</button>
                </li>
            </ul>
        </form>
       </div>
    </div>
    <div class="layui-fluid">
        <div class="Yiling-white Yiling-top">
            <table id="Yiling-table" lay-filter="Yiling-table" style="font-size: 12px;"></table>
        </div>
    </div>
</body>
<!-- 工具栏模板： -->
<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
<!--    <button class="layui-btn layui-btn-sm Yliing-blue Yiling-btn-borderRadius"  lay-event="add"> <i class="layui-icon layui-icon-add-1"></i>新增</button>-->
  </div> 
</script>

</html>
<script src="/layuiadmin/layui/layui.js"></script>
<script>
layui.config({
    base:""
}).extend({
    Yiling:"/libs/ruoling-request/js/Yiling-Request"
}).use(["table","layer","jquery",'form',"Yiling"],function(){
    let table = layui.table;
    let layer = layui.layer;
    let $ = layui.jquery;
    let form = layui.form;
    let request = layui.Yiling.YI_Ajax;
 
    let tableInt = table.render({
        elem:"#Yiling-table",
        height:"full",
        skin: 'line', 
        title:"在线用户",
        url:"/admin/v1/api/monitor/useronline/list",
        toolbar:"#toolbarDemo",
        page:true, //开启分页
        cols: [[ //表头
            {type:"checkbox",width:80,fixed: 'left'}
            ,{field: 'ID', title: 'ID', width:80,fixed: 'left'}
            ,{field: 'sys_user_sessionid', title: '回话编号', width:200}
            ,{field: 'sys_user_login_name', title: '登录账号', width:140}
            ,{field: 'sys_user_login_ipaddr', title: '登录IP地址', width: 140}
            ,{field: 'sys_user_login_address', title: '登录地点', width: 100}
            ,{field: 'sys_user_login_browser', title: '浏览器类型', width: 100}
            ,{field: 'sys_user_login_os', title: '操作系统', width: 140}
            ,{field: 'sys_user_login_state', title: '回话状态', width: 80,templet:"#SetOnLine"}
            ,{field: 'sys_start_time_stamp', title: '登录时间', width: 180,templet: "#SetDateCrete"}
            ,{field: 'sys_last_access_time', title: '最后访问时间', width: 180,templet: "#SetDateCrete1"}
            ,{title: '操作',templet:"#BarOper",minWidth:120,fixed:"right"}
        ]]
    });
    let EditIndex = null;
    table.on("tool(Yiling-table)",function(obj){   //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
        let data = obj.data;   //获取当前数据
        if(obj.event == "del"){

            layer.confirm('是否需要删除！', {
                btn: ['确认', '取消'] //可以无限个按钮
            }, function(index, layero){
                //按钮【按钮一】的回调
                    let arr = [];
                    arr.push(data.ID);
                    new request().SetUrl("/admin/v1/api/system/user/delete").SetType("POST").SetDataPara({Id_all:arr}).Alone().Init(function (result) {
                        window.LoadTable();
                    });
                    layer.close(index)
                }, function(index){
                //按钮【按钮二】的回调
                    layer.close(index)
                });
        }else if(obj.event == "toolclose") {

            layer.confirm('确定要强制选中用户下线吗！', {
                btn: ['确认', '取消'] //可以无限个按钮
            }, function(index, layero){
                //按钮【按钮一】的回调
                new request().SetUrl("/admin/v1/api/monitor/useronline/quit").SetType("POST").SetDataPara({sys_user_sessionid:data.sys_user_sessionid}).Alone().Init(function (result) {
                    window.LoadTable();
                });
                layer.close(index)
            }, function(index){
                //按钮【按钮二】的回调
                layer.close(index)
            });
        }
    });

    let CloseSubmit = document.querySelector("#CloseSubmit");
    CloseSubmit.addEventListener("click",function(){
        window.LoadTable();
        return false;
    });
    /**
     * 检索
     * **/
    form.on('submit(FormSearch)', function(data){
     //   layer.msg(JSON.stringify(data.field));
        let obj = data.field;
        tableInt.reload({
            where:{sys_user_login_name:obj.sys_user_login_name,sys_name:obj.sys_name,sys_admin_type:obj.sys_admin_type}
        })
        return false;
    });

    table.on("toolbar(Yiling-table)",function(obj){    //注：toolbar 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
        let data = obj.data;   //获取当前数据
        switch(obj.event){

        };
    });

    //调用方法
    window.LoadTable = function (){
        tableInt.reload({
            where:{}
        })
    };

})
</script>
<script type="text/html" id="ImagesID">
    <a href="javascript:;"><img style="width:30px;height:30px" src="{{d.imgpath}}" alt=""></a>
</script>

<script type="text/html" id="SetOnLine">
    {{SetOnLineFn(d.sys_user_login_state)}}
</script>

<!-- 时间格式化 -->
<script type="text/html" id="SetDateCrete">
    {{FormDate(d.sys_start_time_stamp,"yyyy年MM月dd日 HH:mm:ss")}}
</script>

<!-- 时间格式化 -->
<script type="text/html" id="SetDateCrete1">
    {{FormDate(d.sys_last_access_time,"yyyy年MM月dd日 HH:mm:ss")}}
</script>


<!-- 操作 -->
<script type="text/html" id="BarOper">
    {{BarOperFn(d)}}
</script>

<!-- 用户状态 -->
<script type="text/html" id="Temlswitch">
    <input type="checkbox" name="blocking" value="{{d.Id}},{{d.blocking}}" lay-skin="switch" lay-filter="TSwith" {{d.blocking == 0 ? 'checked':''}}>
</script>

<script>

    function SetOnLineFn(value){
        if(value == "on_line"){
            return "<a style='color:#FFB800'>在线</a>";
        }else{
            return "<a style='color:#FF5722'>离线</a>"
        }
    }
    function FormDate(d,str){
        return layui.util.toDateString(d, str)
    }

    function BarOperFn(value){
        if(value.sys_admin_type == 1){
            return "";
        }else{
            return `<div class="Barmore">
                    <button class="layui-btn layui-btn-xs Yiling-Red Yiling-btn-borderRadius" lay-event="toolclose"><i class="layui-icon layui-icon-close"></i>强退</button>
                </div>`
        }

    }
</script>